/*
* @Author: Marte
* @Date:   2017-05-14 21:06:47
* @Last Modified by:   Marte
* @Last Modified time: 2017-05-20 16:33:50
*/
{
var myTicChart = echarts.init(document.getElementById('ticchart'));

// 指定图表的配置项和数据

var option = {
    title: {
        text: ' — 近12日票房',
        x: 'center',
        textStyle: {
            color: '#fff',
            fontWeight: 'normal',
            fontSize: 12
        }
    },
    backgroundColor:'#232a4f',
    textStyle: {
        color: '#fff'
    },
    tooltip : {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: 'green'
            }
        }
    },
    legend: {
        data:['销量']
    },
    toolbox: {
        feature: {
            saveAsImage: {
                title: '下载'
            }
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap : false,
        axisLine: {
            lineStyle: {
                color: '#fff'
            }
        },
        data: ["03-03","03-04","03-05","03-06","03-07","03-08","03-09","03-10","03-11","03-12","03-13","03-14"],
        ///----------------------------------X轴数据
        splitNumber: 6
    },
    yAxis: {
        name: '万',
        axisLine: {
            lineStyle: {
                color: '#fff'
            }
        },
        splitLine: 'false',
        splitNumber: 3
    },
    series: [{
        name: '票房',
        type: 'line',
        lineStyle: {
            normal: {
                color: '#fff',
                width: 1
            }
        },
        itemStyle: {
            normal: {
                color: '#fff'
            }
        },
        areaStyle: {
            normal: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: '#d8b9ff' // 0% 处的颜色
                    }, {
                        offset: 1, color: '#7a69fe' // 100% 处的颜色
                    }],
                    globalCoord: false // 缺省为 false
                }
            }
        },
        data: [2453.3,4785.0,4754.7,2081.1,2178.0,4027.1,1928.9,3192.7,6498.2,5246.3,1771.6,1871.50]///----------------------------------Y轴数据
    }]
};

// 使用刚指定的配置项和数据显示图表。
myTicChart.setOption(option);
}


{
var myProvince = echarts.init(document.getElementById('province'));

var option2 = {
    tooltip : {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        x:'left',
        data:['省份']
    },
    dataRange: {
        min: 0,
        max: 10,
        x: 'left',
        y: 'bottom',
        text:['高 %','低 %'],           // 文本，默认为数值文本
        calculable : true,
        color: ['#3236fd','#8588ff','#efefff']
    },
    toolbox: {
        show: true,
        orient : 'vertical',
        x: 'right',
        y: 'center',
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    roamController: {
        show: true,
        x: 'right',
        mapTypeControl: {
            'china': true
        }
    },
    series : [
        {
            name: '省份',
            type: 'map',
            mapType: 'china',
            roam: false,
            itemStyle:{
                normal:{label:{show:true}
            },
                emphasis:{label:{show:true}}
            },
            data:[
                {name:  "西藏", value: 0 },
                {name:  "新疆", value: 0.4 },
                {name:  "内蒙古", value: 0.5 },
                {name:  "甘肃", value: 1.3 },
                {name:  "青海", value: 0.1 },
                {name:  "宁夏", value: 0.2 },
                {name:  "陕西", value: 5.5 },
                {name:  "山西", value: 2.1 },
                {name:  "四川", value: 8.9 },
                {name:  "重庆", value: 4.4 },
                {name:  "云南", value: 0.7 },
                {name:  "贵州", value: 0.4},
                {name:  "广西", value: 0.9 },
                {name:  "广东", value: 9.3 },
                {name:  "湖南", value: 2.7 },
                {name:  "湖北", value: 2.4 },
                {name:  "河南", value: 3.6 },
                {name:  "河北", value: 3.9 },
                {name:  "北京", value: 7.5 },
                {name:  "天津", value: 1.2 },
                {name:  "山东", value: 3.4 },
                {name:  "安徽", value: 8 },
                {name:  "江苏", value: 8.3 },
                {name:  "浙江", value: 4.4 },
                {name:  "江西", value: 1.9 },
                {name:  "上海", value: 4 },
                {name:  "福建", value: 5.8 },
                {name:  "辽宁", value: 3.5 },
                {name:  "吉林", value: 1.6},
                {name:  "海南", value: 1 },
                {name:  "黑龙江", value: 2.2}
            ]
        }
    ]
};


myProvince.setOption(option2);
}

{
var data = [
     {name: '武汉', value: 4.6},
     {name: '北京', value: 4.2},
     {name: '广州', value: 4.1},
     {name: '上海', value: 3.9},
     {name: '深圳', value: 3.7},
     {name: '成都', value: 2.6},
     {name: '长沙', value: 2.5},
     {name: '重庆', value: 2.4},
     {name: '西安', value: 2.1},
     {name: '大连', value: 2.0},
     {name: '长春', value: 1.8},
     {name: '沈阳', value: 1.7},
     {name: '天津', value: 1.7},
     {name: '南京', value: 1.6},
     {name: '哈尔滨', value: 1.6},
     {name: '苏州', value: 1.5},
     {name: '佛山', value: 1.5},
     {name: '南昌', value: 1.5},
     {name: '泉州', value: 1.3},
     {name: '杭州', value: 1.2},
];
var geoCoordMap = {
    '武汉':[114.31,30.52],
    '北京':[116.46,39.92],
    '广州':[113.23,23.16],
    '上海':[121.48,31.22],
    '深圳':[114.07,22.62],
    '成都':[104.06,30.67],
    '长沙':[113,28.21],
    '重庆':[106.54,29.59],
    '西安':[108.95,34.27],
    '大连':[121.62,38.92],
    '长春':[125.35,43.88],
    '沈阳':[123.38,41.8],
    '天津':[117.2,39.13],
    '南京':[118.78,32.04],
    '哈尔滨':[126.63,45.75],
    '苏州':[120.62,31.32],
    '佛山':[113.11,23.05],
    '南昌':[115.89,28.68],
    '泉州':[118.58,24.93],
    '杭州':[120.19,30.26]
};

var convertData = function (data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap[data[i].name];
        if (geoCoord) {
            res.push({
                name: data[i].name,
                value: geoCoord.concat(data[i].value)
            });
        }
    }
    return res;
};

option3 = {
    backgroundColor: '#1c2243',
    title: {
        text: '',
        left: 'center',
        textStyle: {
            color: '#fff'
        }
    },
    tooltip : {
        trigger: 'item'
    },
    geo: {
        map: 'china',
        label: {
            emphasis: {
                show: false
            }
        },
        roam: true,
        itemStyle: {
            normal: {
                areaColor: '#1c2243',
                borderColor: '#fff'
            },
            emphasis: {
                areaColor: '#f6c365'
            }
        }
    },
    series : [
        {
            name: '分布%',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: convertData(data),
            symbolSize: function (val) {
                return val[2] * 15;
            },
            label: {
                normal: {
                    formatter: '{b}',
                    position: 'right',
                    show: false
                },
                emphasis: {
                    show: true
                }
            },
            itemStyle: {
                normal: {
                    color: '#5d5aa1'
                }
            }
        },
        {
            name: 'Top 5',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            data: convertData(data.sort(function (a, b) {
                return b.value - a.value;
            }).slice(0, 6)),
            symbolSize: function (val) {
                return val[2] / 10;
            },
            showEffectOn: 'render',
            rippleEffect: {
                brushType: 'stroke'
            },
            hoverAnimation: true,
            label: {
                normal: {
                    formatter: '{b}',
                    position: 'right',
                    show: true
                }
            },
            itemStyle: {
                normal: {
                    color: '#f4e925',
                    shadowBlur: 10,
                    shadowColor: '#333'
                }
            },
            zlevel: 1
        }
    ]
};



var myCity = echarts.init(document.getElementById('city'));

myCity.setOption(option3);
}



{
    var aCpbtn = document.getElementById('cpbtn');
    var oP = aCpbtn.getElementsByTagName('li')[0];
    var oC = aCpbtn.getElementsByTagName('li')[1];
    var oPr = document.getElementById('province');
    var oCi = document.getElementById('cityBox');

    oP.onclick = function(){
        oPr.className = "location";
        oCi.className = "location hide";
        oP.className = "act";
        oC.className = "";
    }
    oC.onclick = function(){
        oPr.className = "location hide";
        oCi.className = "location";
        oC.className = "act";
        oP.className = "";
    }
}
{
var myPlayer = videojs('my-video');
var oMbtn = document.getElementById('mbtn');
var oMbox = document.getElementById('mbox');
var bShow = false;
function showM(){
    bShow = true;
    move(oMbtn,{
        right: 470
    },{
        duration:700
    })
    move(oMbox,{
        right: 0
    },{
        duration:700,
        complete:function(){
            oMbtn.innerHTML = "收起";
            myPlayer.play();
        }
    })
}

videojs("my-video").ready(function(){
    var myPlayer = this;
    showM();
});

oMbtn.onclick = function(){
    if(bShow){
        bShow = false;
        move(oMbtn,{
            right: 0
        },{
            duration:700
        })
        move(oMbox,{
            right: -470
        },{
            duration:700,
            complete:function(){
                oMbtn.innerHTML = "观看预告片";
                myPlayer.pause();
                myPlayer.currentTime(0);
            }
        })
    }else{
        showM();
    }
}


}


